<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>天下行租车</title>
    <script src="https://unpkg.com/vue@2.7.14/dist/vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="css/base.css">
    <script src="js.txx.js"></script>
</head>
<body>
<div id="app">
    <myheader></myheader>
    <nav class="c900 flex" style="margin: 10px auto 0px">
        <div class="flex" style="justify-content: center;">
            <el-link v-for="b in brands" :underline="false" @click="brand=b.brand;query()">{{b.brand}}</el-link>
        </div>
        <el-input placeholder="搜索关键字" style="width: 250px" v-model="keyword">
            <el-button slot="append" icon="el-icon-search" @click="query()"></el-button>
        </el-input>
    </nav>
    <main class="c900 flex" style="background-color: transparent; padding: 0px">
        <div class="car" v-for="car in cars">
            <img :src="car.image">
            <div>
                <div class="price">￥{{car.price}}<small>元/天</small></div>
                <el-rate v-model="rate"></el-rate>
                <p>{{car.brand}}<br><small>{{car.model}}</small></p>
                <a class="abtn" :href="'detail.html?id='+car.id">租 赁</a>
            </div>
        </div>
        <div style="width: 100%; text-align: center; margin-top: 10px">
            <el-button type="primary" @click="query( page+1,4)" round >更多车辆</el-button>
        </div>
    </main>

</div>
<script>
    var v = new Vue({
        el : "#app",
        data:{
            rate:3.5,
            cars: [],
            page: 1,
            size : 8,
            brand:"",
            keyword: "",
            brands:[],
        },
        created(){
           this.query();
           axios.get("QueryBrand.s").then(res=>this.brands = res.data)
        },
        methods:{
            query(page,size){
                let url = "QueryPageCar.s?"
                if (page){
                    this.page = page;
                }
                if (size){
                    this.size = size;
                }
                if (this.keyword){
                    url += "&keyword=" + this.keyword;
                }
                if (this.brand){
                    url += "&brand=" + this.brand;
                }
                url += "&page=" + this.page;
                url += "&size=" + this.size;

                axios.get(url).then(res=>{
                    if (this.page == 1){
                        this.cars = res.data
                    }else {
                        this.cars = this.cars.concat(res.data)
                    }
                });
            }
        }
    })
</script>
</body>
</html>